<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页结构</title>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<header>
			<div class="head">
				<img src="img/logo.png" alt class="logo">
				<nav>
					<div class="nav">
						<span><a href="/" class="">HOME</a></span>
						<span><a href="#work">WORK</a></span>
						<span><a href="#contact">CONTACT</a></span>
						<span><a href="#">JOIN US</a></span>
						<div>
				</nav>
			</div>
		</header>
		<main>
			<div class="banner">
				<img src="img/p6.JPG" alt class="banner_picture">
			</div>
			<div class="container">

				<p>本网页展示了各种不同题材的摄影作品</p>
			</div>
			<div class="parner">
				<span><img src="img/1.jpg" /></span>
				<span><img src="img/2.jpg" /></span>
				<span><img src="img/3.jpg" /></span>
				<span><img src="img/4.jpg" /></span>
			</div>



			<div class="work">

				<div class="picture">
					<figure>
						<a href="http://www.baidu.com">
							<img src="img/p1.jpg" alt="钟鼓楼" class="photo" />
						</a>
						<figcaption>钟鼓楼</figcaption>
					</figure>
				</div>

				<div class="picture ">
					<figure>
						<a href="http://www.baidu.com">
							<img src="img/p2.jpg" alt="村庄" class="photo" />
						</a>
						<figcaption>村庄</figcaption>
					</figure>
				</div>
				<div class="picture ">
					<figure>
						<a href="http://www.baidu.com">
							<img src="img/p3.jpg" alt="落日" class="photo">
						</a>
						<figcaption>落日</figcaption>
					</figure>
				</div>
				<div class="picture ">
					<figure>
						<a href="img/p4.jpg">
							<img src="img/p4.jpg" alt="日出" class="photo" />
						</a>
						<figcaption>日出</figcaption>
					</figure>
				</div>
				<div class="picture ">
					<figure>
						<a href="img/p5.jpg">
							<img src="img/p5.jpg" alt="寺庙" class="photo" />
						</a>
						<figcaption>寺庙</figcaption>
					</figure>
				</div>
				<div class="picture ">
					<figure>
						<a href="img/p7.jpg">
							<img src="img/p7.jpg" alt="屋檐" class="photo" />
						</a>
						<figcaption>屋檐</figcaption>
					</figure>
				</div>
			</div>
		</main>
		<footer>
			<div class="left-footer">
				<div class="link">
					<a href="http://www.baidu.com">
						<img src="img/weibo.jpg">
					</a>
				</div>
			</div>
			<div class="right-footer">
				<p>writeen by:tangyuqing </p>
				<p>visit me at:
					<a href="#">gitee</a>
				</p>
			</div>
		</footer>



	</body>
</html>
